<template>
	<view class="contents">
		<!-- 收支明细切换 -->
		<view class="scmzc">
			<view v-for="(item,index) in statusList"  :class="stateCurrent === item.value? 'activds':''" @click="onTab(item.value)" :key="index"> 
				{{item.name}}
			</view>
		</view>
		<!-- 收支明细 -->
		<view class="szmxlist" v-for="(item,index) in walletLog" :key="index">
			<view class="szmxlist1">
				<view class="nei">
					{{ item.type_name }}{{ item.title ? '-' + item.title : '' }}
				</view>
				<view class="">
					{{item.createtime | date("yyyy-mm-dd")}}
				</view>
			</view>
			<view class="szmxlist2">
				<text v-if="item.wallet >= 0" class="add font-OPPOSANS">+{{ item.wallet }}</text>
				<text v-else class="minus font-OPPOSANS">{{ item.wallet }}</text>
			</view>
		</view>
		<!-- 空置页 -->
		<shopro-empty v-if="isEmpty" marginTop="200rpx" :image="$IMG_URL + '/imgs/empty/no_data.png'" tipText="暂无数据~">
		</shopro-empty>
		<!-- 更多 -->
		<u-loadmore v-if="!isEmpty" height="80rpx" :status="loadStatus" icon-type="flower" color="#ccc" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activel:0,
				szname:[
					{name:'收益明细'},
					{name:'支出明细'}
				],
				szlist:[],
				stateCurrent: 'all', //默认
				statusList: [{
						name: '全部',
						value: 'all'
					},
					{
						name: '收益明细',
						value: 'add'
					},
					{
						name: '支出明细',
						value: 'reduce'
					}
				],
				showMoney: true,
				//日期选择
				showCalendar: false,
				selDateText: '',
				walletLog: [], //钱包记录
				propsDate: '', //日期参数
				incomeMoney: '', //收入
				expendMoney: '', //支出
				loadStatus: 'loadmore', //loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
				currentPage: 1,
				lastPage: 1
			}
		},
		onLoad() {
			this.currentPage = 1;
			this.lastPage = 1;
			this.walletLog = [];
			this.getWalletLog();
		},
		methods: {
			actives(index){
				let _this=this
				_this.activel=index
				switch(index){
					case 0:
						_this.getqbsz("add")
					break;
					case 1:
						_this.getqbsz("reduce")
					break;	
				}
			},
			// 触底加载更多
			onReachBottom() {
				if (this.currentPage < this.lastPage) {
					this.currentPage += 1;
					this.getWalletLog();
				}
			},
			// tab切换
			onTab(state) {
				if (this.stateCurrent !== state) {
					this.stateCurrent = state;
					this.currentPage = 1;
					this.lastPage = 1;
					this.walletLog = [];
					this.getWalletLog();
				}
			},
			// 钱包明细
			getWalletLog() {
				let that = this;
				that.loadStatus = 'loading';
				that.$http('money.walletLog', {
					wallet_type: 'money',
					status: that.stateCurrent,
					date: that.propsDate,
					page: that.currentPage
				}).then(res => {
					if (res.code === 1) {
						that.walletLog = [...that.walletLog, ...res.data.wallet_logs.data];
						that.incomeMoney = res.data.income;
						that.expendMoney = Math.abs(res.data.expend);
						that.isEmpty = !that.walletLog.length;
						that.lastPage = res.data.wallet_logs.last_page;
						that.loadStatus = that.currentPage < res.data.wallet_logs.last_page ? 'loadmore' :
							'nomore';
					}
				});
			}
			
		}
	}
</script>

<style scoped>
	.contents{
		background-color: #F9F9F9;
	}
	.scmzc{
		display: flex;
		padding-top: 39rpx;
		margin: 0rpx 0 30rpx;
	}
	.scmzc>view{
		/* min-width: 118rpx; */
		width: calc(100% / 3);
		height: 29rpx;
		font-size: 30rpx;
		font-weight: bold;
		color: #333333;
		line-height: 29rpx;
		text-align: center;
	}
	.scmzc>view:first-of-type{
		/* margin-right: 80rpx; */
		/* margin-left: 20rpx; */
	}
	.szmxlist{
		background: #FFFFFF;
		border-radius: 10rpx;
		padding: 25rpx 19rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 20rpx;
		
	}
	.szmxlist1 {
		width: 80%;
	}
	.szmxlist2,.szmxlist2>text{
		font-size: 28rpx;
		font-weight: bold;
		color: #FF9A33;
		/* width: 160rpx; */
	}
	.szmxlist1>view:first-of-type{
		font-size: 28rpx;
		font-weight: 500;
		color: #333333;
		margin-bottom: 30rpx;
	}
	.szmxlist1>view:last-of-type{
		font-size: 24rpx;
		font-weight: 500;
		color: #999999;
	}
	.activds{
		font-weight: bold !important;
		color: #FF9A33 !important;
	}
	.contents{
		min-height: 100vh;
		background: #f1f1f1;
	}
/* .nei{
	width: 80%;
} */
</style>
